<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="fmt"
           uri="http://java.sun.com/jsp/jstl/fmt" %>
<%@page isELIgnored="false" %>
<!DOCTYPE html>
<html>
<!-- Head -->
<head>
    <title>主页</title>
    <!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
    <link rel="stylesheet"
          href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css"
          integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u"
          crossorigin="anonymous">
    <style type="text/css">
        /* 超小屏幕（手机，小于 768px） */
        /* 没有任何媒体查询相关的代码，因为这在 Bootstrap 中是默认的（还记得 Bootstrap 是移动设备优先的吗？） */

        /* 小屏幕（平板，大于等于 768px） */
        @media (min-width: 768px) {
            #slider-sub{
                width: 250px;
                margin-top: 51px;
                position: absolute;
                z-index: 1;
                background: #052b64;
                height: 800px;
            }
            .mysearch{
                margin: 10px 0;
            }
            /*右边核心区域的设置*/
            .page_main{
                margin-left: 255px;
            }
        }
    </style>
</head>
<body>
<%--导航条--%>
 <nav class="navbar navbar-default navbar-static-top" style="background: seagreen">
   <div class="navbar-header">
       <button type="button"class="navbar-toggle collapsed" data-toggle="collapse"
               data-target="#bs-example-navbar-collapse-1" aria-expanded="false" data-target="#slider-sub">
           <span class="sr-only"></span>
           <span class="icon-bar"></span>
           <span class="icon-bar"></span>
           <span class="icon-bar"></span>
       </button>
       <a href="#" class="navbar-brand" style="font-weight: bold;font-size: 20px;color: white" >春萌个人生活管理</a>
   </div>
     <ul class="nav navbar-nav navbar-right" style="margin-right: 25px"><%--右对齐--%>
         <li><a href="#"><span class="badge" style="background: plum">23</span></a></li>
         <li><a href="#"><span class="glyphicon glyphicon-off"></span>&nbsp;注销</a></li>
     </ul>
     <%--侧边功能栏--%>
     <div class="navbar-default navbar-collapse"  id="slider-sub">
         <ul class="nav" >
             <li>
                 <%--搜索--%>
                 <div class="input-group mysearch">
                       <input type="text" class="form-control"/>
                       <span class="input-group-btn">
                           <button type="button" class="btn btn-default">
                               <span class="glyphicon glyphicon-search"></span>
                           </button>
                       </span>
                 </div>
             </li>
             <li>
                 <%--折叠展开--%>
                 <a href="#sub1"  data-toggle="collapse">财务管理
                     <span class="glyphicon glyphicon-chevron-right pull-right" ></span></a>
                  <%--子菜单--%>
                 <ul id="sub1" class="nav collapse">
                     <li><a href="findAll"><span class="glyphicon glyphicon-info-sign"></span>&nbsp;信用卡管理</a></li>
                     <li><a href="#"><span class="glyphicon glyphicon-user"></span>&nbsp;网贷管理</a></li>
                     <li><a href="#"><span class="glyphicon glyphicon-list-alt"></span>&nbsp;其他</a></li>
                     <li><a href="#"><span class="glyphicon glyphicon glyphicon-remove-circle"></span>&nbsp;退出</a></li>
                 </ul>
             </li>
             <li>
                 <a href="#sub2" data-toggle="collapse">学习规划
                 <%--折叠展开--%>
                     <span class="glyphicon glyphicon-chevron-right pull-right" ></span></a>
                 <%--子菜单--%>
                 <ul id="sub2" class="nav collapse">
                     <li><a href="#"><span class="glyphicon glyphicon-info-sign"></span>&nbsp;阅读目标</a></li>
                     <li><a href="#"><span class="glyphicon glyphicon-user"></span>&nbsp;锻炼技能</a></li>
                     <li><a href="#"><span class="glyphicon glyphicon-list-alt"></span>&nbsp;其他</a></li>
                     <li><a href="#"><span class="glyphicon glyphicon glyphicon-remove-circle"></span>&nbsp;退出</a></li>
                 </ul>
             </li>
             <li>
                 <%--折叠展开--%>
                 <a href="#sub3"  data-toggle="collapse">图形界面
                     <span class="glyphicon glyphicon-chevron-right pull-right" ></span></a>
                 <%--子菜单--%>
                 <ul id="sub3" class="nav collapse">
                     <li><a href="#"><span class="glyphicon glyphicon-info-sign"></span>&nbsp;负债图表</a></li>
                     <li><a href="#"><span class="glyphicon glyphicon-user"></span>&nbsp;理财收益</a></li>
                     <li><a href="#"><span class="glyphicon glyphicon-list-alt"></span>&nbsp;收支</a></li>
                     <li><a href="#"><span class="glyphicon glyphicon glyphicon-remove-circle"></span>&nbsp;退出</a></li>
                 </ul>
             </li>
             <li>
                 <%--折叠展开--%>
                 <a href="#sub4"  data-toggle="collapse">工作功能
                     <span class="glyphicon glyphicon-chevron-right pull-right" ></span></a>
                 <%--子菜单--%>
                 <ul id="sub4" class="nav collapse">
                     <li><a href="#"><span class="glyphicon glyphicon-info-sign"></span>&nbsp;项目管理</a></li>
                     <li><a href="#"><span class="glyphicon glyphicon-user"></span>&nbsp;人脉圈</a></li>
                     <li><a href="#"><span class="glyphicon glyphicon-list-alt"></span>&nbsp;待处理事项</a></li>
                     <li><a href="#"><span class="glyphicon glyphicon glyphicon-remove-circle"></span>&nbsp;退出</a></li>
                 </ul>
             </li>
         </ul>
     </div>
 </nav>
<%--右边核心区域--%>
<div class="page_main" style="background: seagreen;margin-top: 0px">
  <%--导航--%>
      <ol class="breadcrumb">
          <%--面包导航--%>
          <li><a href="#">管理首页</a></li>
          <li><a href="#">栏目管理</a></li>
          <li class="active">增加栏目</li>
      </ol>
      <%--小表格--%>
     <%--<div class="row">
         <div class="col-md-6 ">
               <div class="panel panel-default">
                   <div class="panel-heading">最新订单</div>
                   &lt;%&ndash;table-responsive:响应式表格&ndash;%&gt;
                   <div class="panel-body " >
                       &lt;%&ndash;table-hover：鼠标放上有效果&ndash;%&gt;
                       <table class="table table-striped table-hover table-bordered ">
                           <thead>
                           <tr>
                              &lt;%&ndash;列&ndash;%&gt;
                               <th>#</th>
                               <th>订单号</th>
                               <th>订单日期</th>
                               <th>总价</th>
                               <th>状态</th>
                               <th>状态</th>
                               <th>状态</th>
                               <th>状态</th>
                               <th>状态</th>
                               <th>状态</th>
                               <th>状态</th>
                               <th>状态</th>
                               <th>状态</th>
                           </tr>
                           </thead>
                           <tbody>
                                &lt;%&ndash;一行&ndash;%&gt;
                                <tr><td>1</td><td>0123456</td><td>2020-03-05</td><td>1000元</td><td>已发货</td> </tr>
                                <tr><td>2</td><td>0123456</td><td>2020-03-05</td><td>1000元</td><td>已发货</td></tr>
                                <tr><td>3</td><td>0123456</td><td>2020-03-05</td><td>1000元</td><td>已发货</td></tr>
                                <tr><td>4</td><td>0123456</td><td>2020-03-05</td><td>1000元</td><td>已发货</td></tr>
                                <tr><td>5</td><td>0123456</td><td>2020-03-05</td><td>1000元</td><td>已发货</td></tr>
                                <tr><td>6</td><td>0123456</td><td>2020-03-05</td><td>1000元</td><td>已发货</td></tr>
                                <tr><td>7</td><td>0123456</td><td>2020-03-05</td><td>1000元</td><td>已发货</td></tr>
                           </tbody>
                       </table>
                   </div>
               </div>
         </div>
     </div>--%>
      <%--大表格--%>
    <div class="row">
        <div class="col-sm-12">
            <div class="panel panel-default">
                <div class="panel-heading">列表展示</div>
                <%--table-responsive:响应式表格--%>
                <div class="panel-body " >
                    <%--table-hover：鼠标放上有效果--%>
                    <table class="table table-striped table-hover table-bordered ">
                        <thead>
                        <tr>
                            <%--列--%>
                            <th>id</th>
                            <th>时间</th>
                            <th>月份</th>
                            <th>信用卡名称</th>
                            <th>所属银行</th>
                            <th>额度</th>
                            <th>余额</th>
                            <th>账单日</th>
                            <th>还款日</th>
                            <th>状态</th>
                            <th>年卡费</th>
                            <th>类型</th>
                            <th>利息</th>
                            <th>账户</th>
                            <th>备注</th>
                            <th>操作</th>
                            <th>操作</th>
                            <th>操作</th>
                        </tr>
                        </thead>
                        <tbody>
                        <c:forEach items="${list}" var="jcb">
                        <%--一行--%>
                        <tr><td>${jcb.id}</td><td><fmt:formatDate value="${ jcb.schedule }"
                                                                  pattern="yyyy-MM-dd "/></td><td>${jcb.month}</td><td>${jcb.jcbName}</td><td>${jcb.bank}</td><td>${jcb.quota}</td>
                            <td>${jcb.bmikece}</td><td>${jcb.billingDate}</td><td>${jcb.dueDate}</td><td>${jcb.isAlso}</td><td>${jcb.caffe}</td><td>${jcb.genre}</td>
                            <td>${jcb.interest}</td><td>${jcb.account}</td><td>${jcb.remark}</td>
                            <td><a href="jcb">新增</a></td><td><a href="delete?id=${jcb.id}">删除</a></td><td><a href="update?id=${jcb.id}">修改</a></td></tr>
                        </c:forEach>
                      <%--      &lt;%&ndash;第二行&ndash;%&gt;
                        <tr><td>1</td><td>2020-03-06</td><td>3月</td><td>建设银行信用卡</td><td>建设银行</td><td>5000元</td>
                            <td>0元</td><td>每月15号</td><td>每月4号</td><td>已还</td><td>102元</td><td>可循环</td>
                            <td>1.41元</td><td>62170038521436521</td><td>无</td>
                            <td><a href="jcb">新增</a></td><td><a href="delete">删除</a></td><td><a href="update">修改</a></td></tr>--%>
                        </tbody>
                    </table>
                        <%--pull-right:移到右边--%>
                        <nav aria-label="Page navigation"  >
                            <ul class="pagination" style="margin-top: 10px">
                                <li>
                                    <a href="#" aria-label="Previous">
                                        <span aria-hidden="true">上一页</span>
                                    </a>
                                </li>
                                <li><a href="#">1</a></li>
                                <li><a href="#">2</a></li>
                                <li><a href="#">3</a></li>
                                <li><a href="#">4</a></li>
                                <li><a href="#">5</a></li>
                                <li>
                                    <a href="#" aria-label="Next">
                                        <span aria-hidden="true">下一页</span>
                                    </a>
                                </li>
                            </ul>
                        </nav>
                </div>
            </div>
        </div>
    </div>
</div>
<script  src="/js/jquery-2.1.1.js" type="text/javascript"></script>
<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"
        integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa"
        crossorigin="anonymous"></script>
</body>
</html>
